Group calling: Peek into a group call

signalapp · Nov 23, 2020 · 6d53cb1 · 6d53cb1
1 parent af6ec26
commit 6d53cb1
Show file tree

Hide file tree

Showing 15 changed files with 855 additions and 108 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -3023,6 +3023,10 @@
     "message": "Start a video call",
     "description": "Title for the video call button in a conversation"
   },
+  "joinOngoingCall": {
+    "message": "Join",
+    "description": "Text that appears in a group when a call is active"
+  },
   "callNeedPermission": {
     "message": "$title$ will get a message request from you. You can call once your message request has been accepted.",
     "description": "Shown when a call is rejected because the other party hasn't approved the message/call request",

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -3047,21 +3047,9 @@ span.module-in-contacts-icon__tooltip {
   }
 }
 
-.module-conversation-header__audio-calling-button {
-  @include light-theme {
-    @include color-svg(
-      '../images/icons/v2/phone-right-outline-24.svg',
-      $color-gray-75
-    );
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/phone-right-solid-24.svg',
-      $color-gray-15
-    );
-  }
-  height: 24px;
-  width: 24px;
+.module-conversation-header__calling-button {
+  $icon-size: 24px;
+
   margin-left: 12px;
   border: none;
   opacity: 0;
@@ -3074,31 +3062,65 @@ span.module-in-contacts-icon__tooltip {
   &--show {
     opacity: 1;
   }
-}
 
-.module-conversation-header__video-calling-button {
-  @include light-theme {
-    @include color-svg(
-      '../images/icons/v2/video-outline-24.svg',
-      $color-gray-75
-    );
-  }
-  @include dark-theme {
-    @include color-svg('../images/icons/v2/video-solid-24.svg', $color-gray-15);
+  &--video {
+    @include light-theme {
+      @include color-svg(
+        '../images/icons/v2/video-outline-24.svg',
+        $color-gray-75
+      );
+    }
+    @include dark-theme {
+      @include color-svg(
+        '../images/icons/v2/video-solid-24.svg',
+        $color-gray-15
+      );
+    }
+    height: $icon-size;
+    width: $icon-size;
   }
-  height: 24px;
-  width: 24px;
-  margin-left: 12px;
-  border: none;
-  opacity: 0;
-  transition: opacity 250ms ease-out;
 
-  &:disabled {
-    cursor: default;
+  &--audio {
+    @include light-theme {
+      @include color-svg(
+        '../images/icons/v2/phone-right-outline-24.svg',
+        $color-gray-75
+      );
+    }
+    @include dark-theme {
+      @include color-svg(
+        '../images/icons/v2/phone-right-solid-24.svg',
+        $color-gray-15
+      );
+    }
+    height: $icon-size;
+    width: $icon-size;
   }
 
-  &--show {
-    opacity: 1;
+  &--join {
+    @include font-body-1;
+    align-items: center;
+    background-color: $color-accent-green;
+    border-radius: 9999px; // This ensures the borders are completely rounded. (A value like 100% would make it an ellipse.)
+    color: $color-white;
+    display: flex;
+    outline: none;
+    padding: 5px 18px;
+
+    @include keyboard-mode {
+      &:focus {
+        box-shadow: 0px 0px 0px 4px $ultramarine-ui-light;
+      }
+    }
+
+    &:before {
+      @include color-svg('../images/icons/v2/video-solid-24.svg', $color-white);
+      content: '';
+      display: block;
+      height: $icon-size;
+      margin-right: 5px;
+      width: $icon-size;
+    }
   }
 }
 

diff --git a/ts/background.ts b/ts/background.ts
@@ -2653,6 +2653,18 @@ type WhatIsThis = import('./window.d').WhatIsThis;
       return Promise.resolve();
     }
 
+    if (data.message.groupCallUpdate) {
+      if (data.message.groupV2 && messageDescriptor.type === Message.GROUP) {
+        window.reduxActions.calling.peekNotConnectedGroupCall({
+          conversationId: messageDescriptor.id,
+        });
+        return Promise.resolve();
+      }
+      window.log.warn(
+        'Received a group call update for a conversation that is not a GV2 group. Ignoring that property and continuing.'
+      );
+    }
+
     // Don't wait for handleDataMessage, as it has its own per-conversation queueing
     message.handleDataMessage(data.message, event.confirm);
 

diff --git a/ts/components/CallManager.stories.tsx b/ts/components/CallManager.stories.tsx
@@ -116,6 +116,11 @@ story.add('Ongoing Group Call', () => (
           conversationId: '3051234567',
           connectionState: GroupCallConnectionState.Connected,
           joinState: GroupCallJoinState.Joined,
+          peekInfo: {
+            conversationIds: [],
+            maxDevices: 16,
+            deviceCount: 0,
+          },
           remoteParticipants: [],
         },
         activeCallState: getCallState(),

diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx
@@ -29,6 +29,11 @@ function getGroupCallState(): GroupCallStateType {
     conversationId: '3051234567',
     connectionState: 2,
     joinState: 2,
+    peekInfo: {
+      conversationIds: [],
+      maxDevices: 16,
+      deviceCount: 0,
+    },
     remoteParticipants: [],
   };
 }

diff --git a/ts/components/CallingPip.stories.tsx b/ts/components/CallingPip.stories.tsx
@@ -113,6 +113,11 @@ story.add('Group Call', () => {
         conversationId: '3051234567',
         connectionState: GroupCallConnectionState.Connected,
         joinState: GroupCallJoinState.Joined,
+        peekInfo: {
+          conversationIds: [],
+          maxDevices: 16,
+          deviceCount: 0,
+        },
         remoteParticipants: [],
       },
     }

diff --git a/ts/components/conversation/ConversationHeader.stories.tsx b/ts/components/conversation/ConversationHeader.stories.tsx
@@ -208,6 +208,21 @@ const stories: Array<ConversationHeaderStory> = [
           outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
         },
       },
+      {
+        title: 'In a group with an active group call',
+        props: {
+          ...commonProps,
+          color: 'signal-blue',
+          title: 'Typescript support group',
+          name: 'Typescript support group',
+          phoneNumber: '',
+          id: '1',
+          type: 'group',
+          expireTimer: 10,
+          acceptedMessageRequest: true,
+          outgoingCallButtonStyle: OutgoingCallButtonStyle.Join,
+        },
+      },
     ],
   },
   {

diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
@@ -29,6 +29,7 @@ export enum OutgoingCallButtonStyle {
   None,
   JustVideo,
   Both,
+  Join,
 }
 
 export interface PropsDataType {
@@ -280,10 +281,11 @@ export class ConversationHeader extends React.Component<PropsType> {
         type="button"
         onClick={onOutgoingVideoCallInConversation}
         className={classNames(
-          'module-conversation-header__video-calling-button',
+          'module-conversation-header__calling-button',
+          'module-conversation-header__calling-button--video',
           showBackButton
             ? null
-            : 'module-conversation-header__video-calling-button--show'
+            : 'module-conversation-header__calling-button--show'
         )}
         disabled={showBackButton}
         aria-label={i18n('makeOutgoingVideoCall')}
@@ -303,16 +305,34 @@ export class ConversationHeader extends React.Component<PropsType> {
               type="button"
               onClick={onOutgoingAudioCallInConversation}
               className={classNames(
-                'module-conversation-header__audio-calling-button',
+                'module-conversation-header__calling-button',
+                'module-conversation-header__calling-button--audio',
                 showBackButton
                   ? null
-                  : 'module-conversation-header__audio-calling-button--show'
+                  : 'module-conversation-header__calling-button--show'
               )}
               disabled={showBackButton}
               aria-label={i18n('makeOutgoingCall')}
             />
           </>
         );
+      case OutgoingCallButtonStyle.Join:
+        return (
+          <button
+            type="button"
+            onClick={onOutgoingVideoCallInConversation}
+            className={classNames(
+              'module-conversation-header__calling-button',
+              'module-conversation-header__calling-button--join',
+              showBackButton
+                ? null
+                : 'module-conversation-header__calling-button--show'
+            )}
+            disabled={showBackButton}
+          >
+            {i18n('joinOngoingCall')}
+          </button>
+        );
       default:
         throw missingCaseError(outgoingCallButtonStyle);
     }